<!--  -->
<template>
  <div class="home">
    <HomeHeader />
    <div class="ly-tab-wrap">
      <ly-tab v-model="selectedId" :items="items" :options="options"></ly-tab>
      <div class="cate">
        <i class="iconfont icon-fenlei"></i>
        <span>分类</span>
      </div>
    </div>
    <!-- router-view配置子路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeHeader from "./components/HomeHeader";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    HomeHeader,
  },
  data() {
    //这里存放数据
    return {
      selectedId: 0,
      items: [
        { label: "首页" },
        { label: "家用电器" },
        { label: "男装女装" },
        { label: "鞋靴箱包" },
        { label: "手机数码" },
        { label: "电脑办公" },
        { label: "家居家纺" },
        { label: "个人化妆" },
      ],
      options: {
        activeColor: "#fff",
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.search {
  position: fixed;
  width: 100%;
  z-index: 999;
  height: 4.4rem;
}
.ly-tab-wrap {
  position: fixed;
  top: 4.4rem;
  left: 0;
  z-index: 999;
  height: 4.4rem;
  display: flex;
  .ly-tab {
    width: 80%;
    .ly-tabbar {
      border-bottom: 0;
      .ly-tab-list {
        height: 4.4rem;
        padding: 0;
      }
      box-shadow: 0 0px 0px 0px #eee;
      background: transparent;
      .ly-tab-item {
        color: #fff;
      }
    }
  }
  .cate {
    width: 20%;
    // background: #f55;
    text-align: center;
    line-height: 4.4rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 2.2rem;
    }
    span {
      font-size: 1.6rem;
    }
  }
}
</style>
